<template>
  <!-- @on-ok="confirm" -->
  <!-- @on-cancel="confirm" -->
  <o-modal
    v-model="isShow"
    :title="config.modalTitle"
    :size="config.modalSize || [560, 420]"
    :mask="true"
    :tap-close="false"
    :show-footer="true"
    @on-close="close"
  >
    <div slot="content" class="iframe-container clearfix">
      <div v-if="loading || !url" class="loader"></div>
      <div v-show="!loading && url" :class="`iframe-content`">
        <iframe
          :id="`chartIframe`"
          ref="chartIframe"
          :style="iframeStyle"
          :src="url"
          frameborder="0"
        />
      </div>
    </div>
  </o-modal>
</template>

<script lang="ts">
import oModal from '@/components/base/modal/o-modal/index.vue';
import { Tsrv } from '@/services';
import { Component, Prop, Vue } from 'vue-property-decorator';

interface config {
  modalTitle?: string;
  modalSize?: Array<number>;
  config?: any;
}

@Component({
  components: {
    oModal
  }
})
export default class oIframe extends Vue {
  /**
   * props
   */
  @Prop() config: config;

  @Prop() id: number;

  /**
   * data
   */
  private isShow: boolean = false;

  private url: string = '';

  private iframeContainerHtml: any;

  private iframeStyle: any = {
    height: `${document.body.offsetHeight}px`,
    width: `${document.body.offsetWidth}px`,
    transformOrigin: 'left top',
    transform: 'scale(1, 1)',
    position: 'absolute'
  };

  private loading: boolean = false;

  created() {
    this.url = this.config.config?.url ?? '';
    this.show();
  }

  mounted() {
    this.iframeLoad();
    this.$nextTick(() => {
      this.iframeContainerHtml = document.getElementsByClassName(
        'iframe-content'
      )[0];
      // setTimeout
      const erd = this.$elementDetecter();
      erd.listenTo(this.iframeContainerHtml, (el: any) => {
        this.reframe(el);
      });
    });
  }

  // 监听窗口变化
  private reframe(e) {
    const allHeight = document.body.offsetHeight;
    const allWidth = document.body.offsetWidth;
    this.iframeStyle.transform = `scale(${Math.floor(
      (e.offsetWidth / allWidth) * 10000
    ) / 10000}, ${Math.floor((e.offsetHeight / allHeight) * 10000) / 10000})`;
  }

  iframeLoad() {
    this.loading = true;
    if (Tsrv.noValue(this.url)) {
      return;
    }
    const iframe = document.getElementById(`chartIframe`);
    if (iframe['attachEvent']) {
      // IE
      iframe['attachEvent']('onload', () => {
        this.loading = false;
      });
    } else {
      // 非IE
      iframe.onload = () => {
        this.loading = false;
      };
    }
  }

  public show() {
    this.isShow = true;
  }

  public hide() {
    this.isShow = false;
  }

  public confirm() {
    this.$bus.$emit(`modal_${this.id}`, 'test');
    this.hide();
  }

  public close() {
    this.$bus.$emit(`modal_${this.id}`);
    this.hide();
  }
}
</script>

<style lang="scss" scoped>
.iframe-container {
  // padding: 0 20px;
  height: 100%;
  width: 100%;
  // overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0;
}
.iframe-content {
  height: 100%;
  width: 100%;
}
.loader {
  width: fit-content;
  font-size: 17px;
  font-family: monospace;
  line-height: 1.4;
  font-weight: bold;
  background: linear-gradient(#000 0 0) left, linear-gradient(#000 0 0) right;
  background-repeat: no-repeat;
  border-right: 5px solid #0000;
  border-left: 5px solid #0000;
  background-origin: border-box;
  position: relative;
  animation: l9-0 2s infinite;
}
.loader::before {
  content: 'Loading';
}
.loader::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 22px;
  height: 60px;
  background: linear-gradient(90deg, #000 4px, #0000 0 calc(100% - 4px), #000 0)
      bottom / 22px 20px,
    linear-gradient(90deg, red 4px, #0000 0 calc(100% - 4px), red 0) bottom 10px
      left 0/22px 6px,
    linear-gradient(#000 0 0) bottom 3px left 0 /22px 8px,
    linear-gradient(#000 0 0) bottom 0 left 50%/8px 16px;
  background-repeat: no-repeat;
  animation: l9-1 2s infinite;
}
@keyframes l9-0 {
  0%,
  25% {
    background-size: 50% 100%;
  }
  25.1%,
  75% {
    background-size: 0 0, 50% 100%;
  }
  75.1%,
  100% {
    background-size: 0 0, 0 0;
  }
}
@keyframes l9-1 {
  25% {
    background-position: bottom, bottom 54px left 0, bottom 3px left 0,
      bottom 0 left 50%;
    left: 0;
  }
  25.1% {
    background-position: bottom, bottom 10px left 0, bottom 3px left 0,
      bottom 0 left 50%;
    left: 0;
  }
  50% {
    background-position: bottom, bottom 10px left 0, bottom 3px left 0,
      bottom 0 left 50%;
    left: calc(100% - 22px);
  }
  75% {
    background-position: bottom, bottom 54px left 0, bottom 3px left 0,
      bottom 0 left 50%;
    left: calc(100% - 22px);
  }
  75.1% {
    background-position: bottom, bottom 10px left 0, bottom 3px left 0,
      bottom 0 left 50%;
    left: calc(100% - 22px);
  }
}
</style>
